<template>
<div>
    <div class="news-center " v-if="!newsCenterListShow">
      <img :src="hill4Img" alt="" class="hill4Img">
        <div class="news-left">
            <img :src="topImg" alt="" width="100px">  
            <p class="title">新闻中心</p>
            <p class="title-en">News Center</p>
            <p class="serviceImg">
                 <img :src="service2Img" alt="" >
              </p> 
            <p class="subtag example"><span v-for="(item,i) in newsList" :key="i" @click.stop="newDetail(item.code)">{{item.title}}</span></p>
            <p class="example example-bot"><span v-for="(item,i) in newsList2" :key="i" @click="newDetail(item.code)">{{item.title}}</span></p>
        </div>
        <div class="gb"></div>
        <div class="news-right">
          <ul>
              <li v-for="(item,i) in listData " :key="i">
                <img  :src="item.src" />
            </li>
          </ul>
        </div>
    </div>
     <NewsCenterList v-if="newsCenterListShow" :busData="busData"></NewsCenterList>
</div>
</template>

<script>
import '@/assets/less/NewsCenter.less'
import NewsCenterList from './NewsCenterList.vue'
export default {
    name: 'NewsCenter',
    components:{
      NewsCenterList
    },
    data() {
        return {
          newsCenterListShow:false,
            topImg:require('@/assets/imsges/top.png'),
            hill4Img:require('@/assets/imsges/hill4.png'),
            service2Img:require('@/assets/imsges/service2.png'),
            listData: [
                {
                  src:require('@/assets/imsges/rotation1.png'),
                },
                {
                 src:require('@/assets/imsges/rotation2.jpg'),
                },
                {
                src:require('@/assets/imsges/rotation3.png'),
                },
                {
                  src:require('@/assets/imsges/rotation4.png'),
                },
                {
                 src:require('@/assets/imsges/rotation5.png'),
                },
                {
                src:require('@/assets/imsges/rotation6.jpg'),
                },
                {
                src:require('@/assets/imsges/rotation7.jpg'),
                },
                // {
                // src:require('@/assets/imsges/rotation8.png'),
                // },
                // {
                // src:require('@/assets/imsges/rotation9.png'),
                // },
                // {
                // src:require('@/assets/imsges/rotation10.png'),
                // },
                // {
                // src:require('@/assets/imsges/rotation11.png'),
                // },
                // {
                // src:require('@/assets/imsges/rotation12.png'),
                // },
                // {
                // src:require('@/assets/imsges/rotation13.png'),
                // },
            ], // 走马灯
            newsList:[
              {title:'大事记',code:'dsj'},
              {title:'媒体报道',code:'mtbd'},
            ],
            newsList2:[
              {title:'名人轶事',code:'mrts'},
              {title:'创新发展',code:'cxfz'},
              {title:'张恒春新闻',code:'zhcxw'},
            ],
            busData:{
              code:'',
              activeId:0
              }//code
        };
    },


    methods: {
  newDetail(code){
    console.log(code);
        this.busData.code = code
    switch(code){
      case 'dsj':
        this.busData.activeId = 0
        break;
      case 'mtbd':
        this.busData.activeId = 1
        break;
      case 'mrts':
        this.busData.activeId = 2
        break;
      case 'cxfz':
        this.busData.activeId = 3
        break;
      case 'zhcxw':
        this.busData.activeId = 4
        break;
    }
    console.log( this.busData.activeId,' this.busData.activeId');
       this.newsCenterListShow =true


  }
    },
};
</script>
